import { memo } from 'react'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'

const HomeNavContainer = styled.ul.attrs(({theme})=>{
	return theme
})`
	display: flex;
	justify-content: center;
	color:  ${props=>props.textColor};
	background-color:${props=>props.headerBackgroundColor};
	padding: .2rem 0px;
	margin-top: .5rem;
	a {
		padding:.18rem;
		margin:0px 10px;
		color:  ${props=>props.textColor};
		display: block;
		font-size:.3rem;
		text-align: center;
		border-radius:6px;
		&.active {
			background-color: ${props=>props.activeBackgroundColor};
			color:  ${props=>props.activeTextColorWitchActiveBackgroundColor};
		}
	}
`

export default memo(function () {
	return (
		<HomeNavContainer>
			<NavLink to="recommended">推荐</NavLink>
			<NavLink to="rank">排行榜</NavLink>
			<NavLink to="playList">歌单</NavLink>
			<NavLink to="singer">歌手</NavLink>
			<NavLink to="new">最新上架</NavLink>
		</HomeNavContainer>
	)
})
